<template>
	<view class="">
		<view class="position-fixed top-0 pb-3 b_top"></view>
		<view class="mt-5" v-if="u_loadmore">
			<u-loadmore status="loading" icon-type="circle" />
		</view>
		<view v-else>
			<view class="m-2 pl-3 rounded-20 bg-white">
				<view class="clazz d-flex a-center j-sb border-bottom">
					<view class="">真实姓名</view>
					<view class="mr-3 flex-1">
						<input type="text" v-model="real_name" @input="real_input" :cursor-spacing="20" value="" class="text-right" placeholder="请填写您本人的实名认证信息" />
					</view>
				</view>
				<view class="clazz d-flex a-center j-sb border-bottom">
					<view class="">身份证号码</view>
					<view class="mr-3 flex-1">
						<input type="text" :cursor-spacing="20" value="" class="text-right" v-model="identity_number" @input="identity_number_input" placeholder="请填写您本人的实名认证信息" />
					</view>
				</view>
				
				<view class="d-flex a-center j-sb border-bottom">
					<image-cropper :src="c_front" @confirm="confirm_front" @cancel="cancel"></image-cropper>
					<view class="py-2">身份证正面</view>
					<view class="mr-3 flex-1 py-2 d-flex j-end" @click="pic_front">
						<view class="mr-2">
							<view class="front_img" v-if="temp_front"><image :src="temp_front" class="front_img"></image></view>
							<view v-else class="front_img d-flex j-center a-center flex-column add-certificates">
								<view class="mt wh-40"><image src="../../static/images/wallet/add-certificates.png" class="" mode=""></image></view>
								<view class="text-999 font-24">点击上传</view>
							</view>
							<view class="front_img" v-else><image :src="temp_front" class="front_img"></image></view>
						</view>
						<u-icon name="arrow-right" :cursor-spacing="20" color="#909399" size="30"></u-icon>
					</view>
				</view>
				<view class="d-flex a-center j-sb border-bottom">
					<image-cropper :src="c_back" @confirm="confirm_back" @cancel="cancel"></image-cropper>
					<view class="py-2">身份证反面</view>
					<view class="mr-3 flex-1 py-2 d-flex j-end" @click="pic_back">
						<view class="upload_sfz mr-2">
							<view class="" v-if="temp_back"><image :src="temp_back" class="front_img" mode=""></image></view>
							<view v-else class="front_img d-flex j-center a-center flex-column add-certificates">
								<view class="mt wh-40"><image src="../../static/images/wallet/add-certificates.png" class="" mode=""></image></view>
								<view class="text-999 font-24">点击上传</view>
							</view>
						</view>
						<u-icon name="arrow-right" color="#909399" size="30"></u-icon>
					</view>
				</view>
			</view>
			<view class="m-2 pl-3 rounded-20 bg-white">
				<view class="clazz d-flex a-center j-sb border-bottom">
					<view class="">开户银行</view>
					<view class="mr-3 flex-1">
						<input type="text" :cursor-spacing="30" value="" @input="bank_name_input" v-model="bank_name" class="text-right" placeholder="请填写正确的开户银行" />
					</view>
				</view>
				<view class="clazz d-flex a-center j-sb">
					<view class="">银行卡号</view>
					<view class="mr-3 flex-1">
						<input type="digit" :cursor-spacing="30"  value="" @input="bank_card_input" v-model="bank_card" class="text-right" placeholder="请填写正确的银行卡号" />
					</view>
				</view>
			</view>
			<view class="m-2 pl-3 rounded-20 bg-white">
				<view class="clazz d-flex a-center j-sb border-bottom">
					<view class="">手机号码</view>
					<view class="mr-3 flex-1">
						<input type="digit" :cursor-spacing="20" value="" @input="bank_mobile_input" v-model="bank_mobile" class="text-right" placeholder="请填写该卡在银行预留的手机号码" />
					</view>
				</view>
				<view class="clazz d-flex a-center j-sb">
					<view class="">短信验证码</view>
					<view class="mr-3 flex-1 d-flex j-sb a-center ml-3">
						<input type="digit" :cursor-spacing="20" placeholder="请输入" @input="smscode_input" v-model="smscode" />
						<view class="verification">
							<u-toast ref="uToast"></u-toast>
							<u-verification-code :keep-running="true" :seconds="seconds" @end="end" @start="start" ref="uCode" 
							@change="codeChange" :startText="startText" :changeText="changeText" 
							:endText="endText"></u-verification-code>
							<u-button class="u-wave-btn" hover-class="none" @click="getCode">{{tips}}</u-button>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="footer">
		</view>
		<view class="bg-white release py-2 w-100 position-fixed bottom-0">
			<button type="warn" @click="next_sub">提交</button>
		</view>
		<!-- 添加账号信息成功 -->
		<u-modal v-model="succes_show" width="400" :mask-close-able="true" :show-title="false" :show-confirm-button="false">
			<view class="d-flex j-center a-center flex-column py-5">
				<view class="">
					<image src="../../static/images/wallet/audit-success.png" class="success_img" mode=""></image>
				</view>
				<view class="mt-2">添加账号信息成功</view>
			</view>
		</u-modal>
		<!-- 拍照 -->
		<s-popup custom-class="demo-popup" position="bottom" v-model="pictureShow">
			<!-- 内容 -->
			<view class="m-2 bg-white rounded-20 icon_share">
				<view class="border-bottom d-flex ml-4 py-3 j-center a-center" @click="photos">
					<view class="">拍照</view>
				</view>
				<view class="d-flex ml-4 py-3 j-center a-center" @click="album">
						<view class="">我的相册</view>
				</view>
			</view>
			<view class="d-flex j-center a-center span-19 py-3 bg-white mx-2 my-1 rounded-25" @click="cancelShare">
				取消
			</view>
		</s-popup>
		<u-toast ref="uToast"/>
	</view>
</template>

<script>
	import sPopup from '../../components/s-popup/index.vue';
	import ImageCropper from "@/components/invinbg-image-cropper/invinbg-image-cropper.vue";
	export default {
		components: {
			ImageCropper,
			sPopup
		},
		data(){
			return {
				tips: '',
				earnings:"", // home数据
				seconds: 60,
				refCode: null,
				startText: '获取验证码',
				changeText: 'XS',
				endText: '重新获取',
				succes_show:false,
				real_name:"", // 实名认证
				identity_number:"", // 身份证号码
				bank_name:"", // 银行名称
				bank_card:"", // 银行卡号
				bank_mobile:"", // 银行预留手机号
				smscode:"", // 短信验证码
				
				identity_pic_front:"", // 身份证正面
				identity_pic_back:"", // 身份证反面
				pictureShow:false, // 添加图片模态框
				temp_front:"", // 正面图片零时路径
				temp_back:"", // 反面图片零时路径
				c_front:"", // 正面图片零时路径
				c_back:"", // 反面图片零时路径
				
				pic_show:false, // 身份开关
				u_loadmore:true, // 加载中
			}
		},
		methods:{
			showToast(e) {
				this.$refs.uToast.show({
					title: e,
					type: 'default',
				})
			},
			// 取消
			cancelShare(){
				this.pictureShow = false;
			},
			// 拍照
			photos(){
				let that=this;
				uni.chooseImage({
				    count:1,
				    sizeType:["original","compressed"],
					sourceType: ['camera'], //从相册选择
				    success:(res)=>{
						console.log(res,"拍照")
						this.tempFilePath=res.tempFilePaths
					}
				});
				that.pictureShow=false;
			},
			// 我的相册
			album(){
				if(this.pic_show){
					let that=this;
					uni.chooseImage({
					    count:1,
					    sizeType:["original","compressed"],
						sourceType: ['album'], //从相册选择
					    success:(res)=>{
							console.log(res,"我的相册")
							this.c_front=res.tempFilePaths
						}
					});
					that.pictureShow=false;
				}else{
					console.log(11)
					let that=this;
					uni.chooseImage({
					    count:1,
					    sizeType:["original","compressed"],
						sourceType: ['album'], //从相册选择
					    success:(res)=>{
							console.log(res,"我的相册")
							this.c_back=res.tempFilePaths
						}
					});
					that.pictureShow=false;
				}
			},
			uploadFile_f(filePath){
				uni.uploadFile({
					url:`${this.localConfig.web_Url}v2/store/medialibrary/image/temp/upload`,
					filePath:filePath,
					name:"tempimage",
					formData:{
						'token':uni.getStorageSync("token")
					},
					success: (res) => {
						console.log(res)
						let fileData=JSON.parse(res.data)
						console.log(fileData.data)
						this.identity_pic_front=fileData.data
					}
				})
			},
			uploadFile_b(filePath){
				uni.uploadFile({
					url:`${this.localConfig.web_Url}v2/store/medialibrary/image/temp/upload`,
					filePath:filePath,
					name:"tempimage",
					formData:{
						'token':uni.getStorageSync("token")
					},
					success: (res) => {
						console.log(res)
						let fileData=JSON.parse(res.data)
						console.log(fileData.data)
						this.identity_pic_back=fileData.data
					}
				})
			},
			// 裁剪图片
			confirm_front(e) {
			    this.tempFilePath = ''
			    this.temp_front = e.detail.tempFilePath
				this.uploadFile_f(this.temp_front)
			},
			confirm_back(e) {
			    this.tempFilePath = ''
			    this.temp_back = e.detail.tempFilePath
				this.uploadFile_b(this.temp_back)
			},
			toJSON(){
				return this
			},
			// 真实姓名
			real_input(e){
				this.real_name=e.detail.value
			},
			// 身份证号码
			identity_number_input(e){
				this.identity_number=e.detail.value
			},
			// 身份证正面
			pic_front(){
				this.pic_show=true
				this.pictureShow=true
			},
			// 身份证反面
			pic_back(){
				this.pic_show=false
				this.pictureShow=true
			},
			// 开户银行
			bank_name_input(e){
				this.bank_name=e.detail.value
			},
			// 银行卡号
			bank_card_input(e){
				this.bank_card=e.detail.value
			},
			// 手机号码
			bank_mobile_input(e){
				this.bank_mobile=e.detail.value
			},
			smscode_input(e){
				this.smscode=e.detail.value
			},
			// 短信验证码
			codeChange(text) {
				// console.log(text);
				this.tips = text;
			},
			
			getCode() {
				if(this.$refs.uCode.canGetCode) {
					// 模拟向后端请求验证码
					uni.showLoading({
						title: '正在获取验证码',
						success: () => {
							this.$H.post("v2/store/shop/captcha/sms",{
								type:"store_verify_apply",
								value:this.bank_mobile
							}).then(res=>{
								console.log(res)
							})
						}
					})
					setTimeout(() => {
						uni.hideLoading();
						// 这里此提示会被this.start()方法中的提示覆盖
						this.$u.toast('验证码已发送');
						// 通知验证码组件内部开始倒计时
						this.$refs.uCode.start();
					}, 2000);
				} else {
					this.$u.toast('倒计时结束后再发送');
				}
			},
			secondsChange(index) {
				this.seconds = index == 0 ? 60 : index == 1 ? 10 : 5;
			},
			end() {
				this.$u.toast('倒计时结束');
			},
			start() {
				this.$u.toast('倒计时开始');
			},
			// 提交
			next_sub(){
				if(this.real_name==""){
					this.showToast("您还未填写真实姓名")
				}else if(this.identity_number==""){
					this.showToast("您还未填写身份证号码")
				}else if(this.temp_front==""){
					this.showToast("您还未上传身份证正面")
				}else if(this.temp_back==""){
					this.showToast("您还未上传身份证反面")
				}else if(this.bank_name==""){
					this.showToast("您还未填写银行名称")
				}else if(this.bank_card==""){
					this.showToast("您还未填写银行卡号")
				}else if(this.bank_mobile==""){
					this.showToast("您还未填写手机号码")
				}else if(this.smscode==""){
					this.showToast("您还未填写短信验证码")
				}else{
					this.succes_show=true
					this.$H.post("v2/store/account/verify/apply",{
						real_name:this.real_name, // 真实姓名
						identity_number:this.identity_number, // 身份证号码
						bank_name:this.bank_name, // 银行名称
						bank_card:this.bank_card, // 银行卡号
						bank_mobile:this.bank_mobile, // 预留手机号
						identity_pic_front:this.identity_pic_front, // 身份证正面
						identity_pic_back:this.identity_pic_back, // 身份证反面
						smscode:this.smscode, // 短信验证码
					}).then(res=>{
						uni.redirectTo({
							url:"/pagesA/store/store-certification-update"
						})	
					})
				}
			}
		},
		onLoad() {
			// HOME数据
			this.$H.post("v2/store/home/data").then(res=>{
				if(res.data.store_account.account_verify_status=="unverify"){
					this.earnings="未审核"
				}else if(res.data.store_account.account_verify_status=="refused"){
					this.earnings="审核失败"
				}else if(res.data.store_account.account_verify_status=="agree"){
					this.earnings="审核通过"
				}
				this.u_loadmore=false 
			})
		}
	}
</script>

<style>
	.upload_sfz{
		width: 200upx;
		height: 100upx;
		border-radius: 5upx;
	}
	 .u-wave-btn /deep/ button{
		width: 220upx!important;
		height: 70upx!important;
		line-height: 70upx!important;
		text-align: center!important;
		border-radius: 50upx!important;
		background-color: #ff8500!important;
		color: #FFFFFF!important;
	}
	.u-wave-btn /deep/ button::after{
		border: none!important;
	}
	.success_img{
		width: 100upx;
		height: 100upx;
	}
	.wallet_img{
		width: 50upx;
		height: 50upx;
	}
	
	.front_img{
		width: 200upx;
		height: 100upx;
		border-radius: 5upx;
	}
	.s-popup-mask{
		background: rgba(204,204,204,0.3)!important;
	}
	.content{
		background-color:rgb(237,237,237)!important;
		color: #666666;
	}
	.s-popup-wrap{
		background: rgba(204,204,204,0)!important;
	}
	.icon_share view{
		color: #888;
	}
	.icon_share image{
		width: 120upx;
		height: 120upx;
	}
</style>
